<template>
  <div class="tabbar">
    <router-link
      v-for="(item, index) in tabbarArray"
      :key="index"
      :to="item.path"
      active-class="current-router"
    >
      <div class="item-icon">
        <i class="iconfont" :class="item.icon"></i>
      </div>
      <div class="item-name">{{ item.name }}</div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "tabbarArray",
  props: {
    tabbarArray: Array,
  },
};
</script>
<style lang="scss" scoped>
$tabbar-radius: 20px;

.tabbar {
  height: $tabbar-height;
  background: #fff;
  border-top-left-radius: $tabbar-radius;
  border-top-right-radius: $tabbar-radius;
  box-sizing: border-box;
  width: 100%;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
  box-shadow: 0px -5px 2px rgba($color: #ccc, $alpha: 0.1);
  .item-icon {
    height: 35px;
    i {
      font-size: 26px;
    }
  }
  a {
    color: #999;
  }
  .current-router {
    color: green;
  }
}
</style>
